<template>
	<scroll-view scroll-y="true" class="scroll-main">
		<view class="user-head">
			<!-- 用户信息 -->
			<view class="user-info">
				<view class="">
					<view class="name">
						微信用户
					</view>
					<view class="">
						ID:11111
					</view>
					<view class="edit-btn">
						<view class=""> 编辑个人信息</view>
						<view class="stroke"></view>
					</view>
				</view>
				<image class="avatar"
					src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
					mode=""></image>
			</view>
		</view>
		<!-- 余额 | 积分 -->
		<view class="user-box ">
			<template v-for="(item,index) in menudata" :key="index">
				<view class="menu-1" @click="onMenu(item)">
					<view class="icon border1">

					</view>
					{{ item.name }}
				</view>
			</template>
		</view>
		<!-- 服务 | 菜单 -->
		<view class="user-menu">
			<template v-for="(item,index) in serviceMenu" :key="index">
				<view class="menu-2" @click="onMenu(item)">
					<view class="icon"></view>
					<view class="name"> {{ item.name }} </view>
					<view class="stroke"></view>
				</view>
			</template>
		</view>

	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				menudata: [{
						name: '余额',
						val1: 1,
					},
					// {
					// 	name: '积分',
					// 	val1: 1,
					// },

					{
						name: '任务',
						val1: 1,
					},
					{
						name: '订单',
						val1: 1,
					},
				],
				serviceMenu: [{
						name: '新增商品',
						url: '/pages/product/add'
					},
					{
						name: '商品管理',
						url: '/pages/product/index'
					},
					{
						name: '品牌管理',
					},
					{
						name: '商品类型',
					},
					// {
					// 	name: '关于',
					// },
					// {
					// 	name: '设置',
					// },
				]
			}
		},
		methods: {
			onMenu(item) {

				if (item.url) {
					wx.navigateTo({
						url: item.url,
						events: {
							// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
							acceptDataFromOpenedPage: function(data) {
								console.log('acceptDataFromOpenedPage', data)
							},
							someEvent: function(data) {
								console.log('someEvent', data)
							}
						}
					})
				} else uni.showToast({
					title: '未开放',
					icon: 'error',
					duration: 2000
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-main {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background: #F2F8F3;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.user-head {
		position: relative;
		z-index: 0;
		background: #70DEB1;
		height: 440rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.user-info {
			width: 680rpx;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			bottom: 120rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-family: Yuanti SC, Yuanti SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 1;
			text-align: left;
			font-style: normal;
			text-transform: none;

			.name {
				font-family: Yuanti SC, Yuanti SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				line-height: 1;
				margin-bottom: 20rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 100%;
			}

			.edit-btn {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
			}
		}
	}


	// 余额 | 积分
	.menu-1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-family: Yuanti SC, Yuanti SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #343434;
		line-height: 1;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 32rpx 0;

		.icon {
			$iconSize: 64rpx;
			width: $iconSize;
			height: $iconSize;
			margin-bottom: 16rpx;
		}
	}

	.user-box {
		position: relative;
		z-index: 2;
		width: 680rpx;
		background: #FFFFFF;
		margin: -88rpx auto 0;
		border-radius: 35rpx 35rpx 35rpx 35rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 64rpx;
		box-sizing: border-box;
	}

	// 服务 | 菜单
	.user-menu {
		margin-top: 32rpx;

		.menu-2 {
			margin: auto;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 680rpx;
			height: 98rpx;
			line-height: 1;
			font-family: Yuanti SC, Yuanti SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
			line-height: 88rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding-right: 10rpx;

			// padding: 0 35rpx;
			.name {
				flex: 1;
			}

			.icon {
				width: 8rpx;
				height: 40rpx;
				background: #70DEB1;
				margin-right: 16rpx;
				border-radius: 4rpx;
			}

			+.menu-2 {
				// border-top: 1rpx solid rgba(51,51,51,0.15);
			}

			.stroke {
				width: 24rpx;
				height: 24rpx;
				border: 6rpx solid rgba(100, 100, 100, 0);
				border-right-color: rgba(200, 200, 200, 1);
				border-top-color: rgba(200, 200, 200, 1);
				transform: rotate(45deg);
				border-radius: 0 8rpx 0 0;
				/* 顺时针旋转 45 度 */
				box-sizing: border-box;
				margin: 0;
			}
		}
	}
</style>